[V0_FILE]xml:file="public/logo.svg" isEdit="true" isMerged="true" [V0_FILE]javascript:file="tailwind.config.js" isEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}", "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { colors: { dark: { 100: "#2A2A2A", 200: "#252525", 300: "#202020", 400: "#1A1A1A", 500: "#151515", 600: "#101010", 900: "#0A0A0A", }, border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, keyframes: { "matrix-fade": { "0%, 100%": { opacity: 0 }, "50%": { opacity: 1 }, }, click: { "0%, 100%": { transform: "scale(1)" }, "50%": { transform: "scale(0.95)" }, }, }, animation: { matrix: "matrix-fade 0.5s ease-in-out infinite", click: "click 0.3s ease-in-out", }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="components/splash-screen.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import Image from "next/image" import { cn } from "@/lib/utils" export function SplashScreen() { const [progress, setProgress] = useState(0) const [matrixText, setMatrixText] = useState("") const [isComplete, setIsComplete] = useState(false) useEffect(() => { const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789$#@%" let interval: NodeJS.Timeout // Matrix text effect const matrixInterval = setInterval(() => { const randomText = Array(8) .fill(0) .map(() => characters.charAt(Math.floor(Math.random() * characters.length))) .join("") setMatrixText(randomText) }, 50) // Progress bar animation interval = setInterval(() => { setProgress((prev) => { if (prev >= 100) { clearInterval(interval) clearInterval(matrixInterval) setTimeout(() => setIsComplete(true), 500) // Delay before hiding splash screen return 100 } return prev + 1 }) }, 30) return () => { clearInterval(interval) clearInterval(matrixInterval) } }, []) return (

{/* Matrix-style loading text */}

{`LOADING_SYSTEM: ${matrixText}`}

{/* Progress bar container */}

{/* Progress percentage */}

{`${progress}%`}

) } [V0_FILE]typescript:file="lib/utils.ts" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="components/cart-icon.tsx" isMerged="true" "use client" import { ShoppingCart } from "lucide-react" import { useState } from "react" export function CartIcon() { const [isClicked, setIsClicked] = useState(false) const handleClick = () => { setIsClicked(true) setTimeout(() => setIsClicked(false), 300) // Reset after animation } return ( ) } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --foreground-rgb: 255, 255, 255; --background-start-rgb: 0, 0, 0; --background-end-rgb: 0, 0, 0; } body { color: rgb(var(--foreground-rgb)); background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb)); cursor: none; } /* Custom inverse cursor */ .custom-cursor { width: 20px; height: 20px; border: 2px solid white; border-radius: 50%; position: fixed; pointer-events: none; z-index: 9999; mix-blend-mode: difference; } /* Inverse text selection */ ::selection { background-color: #ffffff; color: #0a0a0a; } /* Click animation */ @keyframes click { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } .cursor-click { animation: click 0.3s ease-in-out; } [V0_FILE]typescriptreact:file="components/auto-slider-banner.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import Image from "next/image" import { Button } from "@/components/ui/button" const images = [ "https://64.media.tumblr.com/db8472cfbb89a155148003b053d5f3de/4d6d987e0cee7307-8e/s400x225/158142e8e876044a6191733a02f6ee5ac1643b58.gif", "https://i.pinimg.com/originals/14/f4/35/14f435eaaf8d107cca5055ce150eaf47.gif", ] export function AutoSliderBanner() { const [currentIndex, setCurrentIndex] = useState(0) useEffect(() => { const interval = setInterval(() => { setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length) }, 5000) // Change image every 5 seconds return () => clearInterval(interval) }, []) const handleShopClick = () => { const productSection = document.getElementById("product-section") if (productSection) { productSection.scrollIntoView({ behavior: "smooth" }) } } return (

{images.map((src, index) => (

))}

Premium Streetwear

Elevate Your Style

) } [V0_FILE]typescriptreact:file="components/logo.tsx" isMerged="true" import Image from "next/image" export function Logo() { return (

) } [V0_FILE]typescriptreact:file="components/custom-cursor.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" export function CustomCursor() { const [position, setPosition] = useState({ x: 0, y: 0 }) const [clicked, setClicked] = useState(false) useEffect(() => { const updatePosition = (e: MouseEvent) => { setPosition({ x: e.clientX, y: e.clientY }) } const handleClick = () => { setClicked(true) setTimeout(() => setClicked(false), 300) } window.addEventListener("mousemove", updatePosition) window.addEventListener("click", handleClick) return () => { window.removeEventListener("mousemove", updatePosition) window.removeEventListener("click", handleClick) } }, []) return (

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" import "./globals.css" import type { Metadata } from "next" import { Inter } from "next/font/google" import type React from "react" import { SplashScreen } from "@/components/splash-screen" import { Logo } from "@/components/logo" import { CustomCursor } from "@/components/custom-cursor" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "SDFM 2520 - Premium Hoodies", description: "Premium streetwear and comfortable hoodies", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return (

{children} ) } [V0_FILE]typescriptreact:file="components/hoodie-card.tsx" isEdit="true" "use client" import Image from "next/image" import { useState } from "react" import { Button } from "@/components/ui/button" interface HoodieCardProps { name: string price: number image1: string image2: string } export function HoodieCard({ name, price, image1, image2 }: HoodieCardProps) { const [isHovered, setIsHovered] = useState(false) return (

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} > {name}

{name}

${price.toFixed(2)}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" import { HoodieCard } from "@/components/hoodie-card" import { AutoSliderBanner } from "@/components/auto-slider-banner" export default function Home() { const hoodies = [ { id: 1, name: "SDFM Classic Black", price: 149.99, image1: "https://i.pinimg.com/736x/92/06/56/920656e03f09691d871e149b5dad8f7f.jpg", image2: "https://i.pinimg.com/736x/94/d3/14/94d31436dfc73fcf93058089f69ffd96.jpg", }, { id: 2, name: "SDFM Premium Gray", price: 154.99, image1: "https://i.pinimg.com/736x/92/06/56/920656e03f09691d871e149b5dad8f7f.jpg", image2: "https://i.pinimg.com/736x/94/d3/14/94d31436dfc73fcf93058089f69ffd96.jpg", }, { id: 3, name: "SDFM Signature Navy", price: 159.99, image1: "https://i.pinimg.com/736x/92/06/56/920656e03f09691d871e149b5dad8f7f.jpg", image2: "https://i.pinimg.com/736x/94/d3/14/94d31436dfc73fcf93058089f69ffd96.jpg", }, { id: 4, name: "SDFM Limited Edition", price: 199.99, image1: "https://i.pinimg.com/736x/92/06/56/920656e03f09691d871e149b5dad8f7f.jpg", image2: "https://i.pinimg.com/736x/94/d3/14/94d31436dfc73fcf93058089f69ffd96.jpg", }, ] return (

{/* Full-screen Auto-sliding Banner */} {/* Product Section */}

Latest Collection

{hoodies.map((hoodie) => ( ))}

) }

About

Tags

Share

About

Tags

Share

More Templates Like This